<template>
  <!-- 明星教师管理 -->
  <!-- 杨友朋 -->
  <div>
    <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-s-home" style="font-weight:bold"></i>  后台管理</el-breadcrumb-item>
                <el-breadcrumb-item><b>明星教师管理</b></el-breadcrumb-item>
                <el-breadcrumb-item></el-breadcrumb-item>
              </el-breadcrumb>
          </el-card>
    <el-card style="margin-top:20px">
      <div style="float:left;width:680px;margin-bottom:20px">
        <el-select v-model="tSex" placeholder="请选择教师性别" style="margin-right:10px;width:180px">
          <el-option v-for="item in sexArr" :key="item.label" :label="item.label" :value="item.id">
                      </el-option>
        </el-select>
        <el-select v-model="tEducation" placeholder="请选择教师学历" style="margin-right:10px;width:180px">
          <el-option v-for="item in education" :key="item.label" :label="item.label" :value="item.label">
                      </el-option>
        </el-select>
        <el-input placeholder="请输入教师姓名" v-model="tName" style="width:300px">
          <el-button slot="append" icon="el-icon-search" @click="selectTeacher()"></el-button>
        </el-input>
        <div style="float:left;margin-top:15px">
          <el-button type="primary" size="small" @click="add()">添加</el-button>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="我再想想" icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="delBetch">
            <el-button slot="reference" style="margin-left: 5px" type="primary" size="small">批量删除</el-button>
          </el-popconfirm>
        </div>
      </div>
      <div style="background-color: white; margin-top: 10px">
        <!-- 全查 -->
        <el-table :data="teacherData" style="width: 100%; margin-top: 10px; margin-left: 15px" @selection-change="handleSelectionChange" show-overflow-tooltip>
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="tname" label="教师姓名" align="center">
          </el-table-column>
          <el-table-column label="教师照片" width="" align="center">
            <template slot-scope="scope">
              <el-image style="width: 100px; height: 100px" :src="'http://101.43.223.224:8765/image/getImageById?id=' + scope.row.imageId">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="tsex" label="教师性别" align="center" :formatter="sexType">
          </el-table-column>
          <el-table-column prop="tseniority" label="教师工龄（年）" align="center">
          </el-table-column>
          <el-table-column prop="teducation" label="教师学历" align="center">
          </el-table-column>
          <el-table-column prop="tintroduction" label="教师介绍" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="thonor" label="教师荣誉" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="openUpTeacher(scope.row)" type="primary" size="small">修改</el-button>
              <el-popconfirm confirm-button-text="确定" cancel-button-text="我再想想" icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)">
                <el-button slot="reference" style="margin-left: 5px" type="primary" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination :page-sizes="[5, 10, 15, 20]" :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total" :current-page.sync="pages.pageNum"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" background></el-pagination>
      </div>

      <!-- 添加教师 -->
      <el-dialog :visible.sync="addHandle" width="20%">
        <el-form stripe style="width: 100%" :model="addForm" ref="addForm">
          <el-form-item>
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageFile" :src="imageFile" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-input v-model="addForm.tname" placeholder="请输入教师姓名"></el-input>
          </el-form-item>
          <el-form-item prop="tsex">
            <template>
              <el-radio v-model="addForm.tsex" label="M">男</el-radio>
              <el-radio v-model="addForm.tsex" label="F">女</el-radio>
            </template>
          </el-form-item>
          <el-form-item>
            <el-select v-model="addForm.teducation" placeholder="请选择教师学历" style="width:150px;margin-right:10px">
              <el-option v-for="item in education" :key="item.label" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="addForm.tseniority" placeholder="请输入教师工龄" maxlength="3"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="addForm.tintroduction" placeholder="请输入教师介绍" maxlength="255"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="addForm.thonor" placeholder="请输入教师荣誉" maxlength="255"></el-input>
          </el-form-item>
        </el-form>
        <el-button style=" background-color: rgb(234, 244, 255); color: rgb(96, 169, 255);" @click="addTeacher('addForm')">确 定</el-button>
        <el-button @click="addHandle = false" style=" background-color: rgb(234, 244, 255); color: rgb(96, 169, 255); ">取 消</el-button>
      </el-dialog>

      <!-- 修改教师 -->
      <el-dialog :visible.sync="upHandle" width="20%">
        <el-form stripe style="width: 100%" :model="upForm">
          <el-form-item>
            <el-input v-model="upForm.tname" placeholder="请输入教师姓名"></el-input>
          </el-form-item>
          <el-form-item prop="tsex">
            <template>
              <el-radio v-model="upForm.tsex" label="M">男</el-radio>
              <el-radio v-model="upForm.tsex" label="F">女</el-radio>
            </template>
          </el-form-item>
          <el-form-item>
            <el-select v-model="upForm.teducation" placeholder="请选择教师学历" style="width:150px;margin-right:10px">
              <el-option v-for="item in education" :key="item.label" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="upForm.tseniority" placeholder="请输入教师工龄" maxlength="3"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="upForm.tintroduction" placeholder="请输入教师介绍" maxlength="255"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="upForm.thonor" placeholder="请输入教师荣誉" maxlength="255"></el-input>
          </el-form-item>

        </el-form>
        <el-button style=" background-color: rgb(234, 244, 255); color: rgb(96, 169, 255);" @click="upTeacher()">确 定</el-button>
        <el-button @click="upHandle = false" style=" background-color: rgb(234, 244, 255); color: rgb(96, 169, 255); ">取 消</el-button>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //条数
      total: 0,
      //教师数组
      teacherData: [],
      //添加教师按钮开关
      addHandle: false,
      //修改教师按钮开关
      upHandle: false,
      //图片路径回显
      imageFile: "",
      //id数组
      ids: [],
      sexArr: [
        { id: "M", label: "男" },
        { id: "F", label: "女" },
      ],
      tSex: "",
      tEducation: "",
      tName: "",
      //学历数组
      education: [
        { label: "博士" },
        { label: "博士研究生" },
        { label: "硕士" },
        { label: "硕士研究生" },
        { label: "本科" },
        { label: "专科" },
        { label: "中专" },
      ],
      //添加教师表单
      addForm: {
        tnam: "",
        tsex: "",
        teducation: "",
        tseniority: "",
        tintroduction: "",
        thonor: "",
      },
      //修改教师表单
      upForm: {},
      pages: {
        //当前页
        pageNum: 1,
        //每页几条数据
        pageSize: 5,
      },
    };
  },
  created() {
    this.selectTeacher();
  },
  methods: {
    //给表格中的性别赋值
    sexType: function (row, column) {
      return row.tsex == "M" ? "男" : row.tsex == "F" ? "女" : "第三性别";
    },
    //选中行id存入ids数组
    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
    },
    //打开添加页面
    add() {
      this.addHandle = true;
      this.imageFile = "";
      this.addForm = {
        tname: "",
        tsex: "",
        teducation: "",
        tseniority: "",
        tintroduction: "",
        thonor: "",
      };
    },
    beforeAvatarUpload(file) {
      //上传图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过2MB!");
        return false;
      }
      //赋值
      this.fileImage = file;
      this.imageFile = URL.createObjectURL(file);
      //isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
    },
    //添加教师
    addTeacher(addForm) {
      // 添加图片信息
      this.$refs[addForm].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          if (this.fileImage) {
            formData.set("file", this.fileImage, this.fileImage.name);
            console.log(this.fileImage);
          }
          for (const key in this.addForm) {
            formData.set(key, this.addForm[key]);
          }
          formData.forEach((value, key) => {});
          formData.set("tName", this.addForm.tname);
          formData.set("tSex", this.addForm.tsex);
          formData.set("tEducation", this.addForm.teducation);
          formData.set("tSeniority", this.addForm.tseniority);s
          formData.set("tIntroduction", this.addForm.tintroduction);
          formData.set("tHonor", this.addForm.thonor);
          console.log(formData);
          this.$axios
            .post("http://127.0.0.1:8088/teacher/insertTeacher", formData)
            .then((res) => {
              if (res.data.flag) {
                this.$message.success("上传成功");
                //清空表单
                this.addForm = {};
                // 关闭窗口
                this.addHandle = false;
                //刷新
                this.selectTeacher();
              } else {
                this.$message.error("warning", res.data.code);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //根据ids批量删除教师
    delBetch() {
      this.$axios
        .post("/teacher/deleteTeacherByIds", this.ids)
        .then((res) => {
          if (res.data) {
            this.$message.success("批量删除成功");
            //刷新
            this.selectTeacher();
          } else {
            this.$message.error("批量删除失败");
          }
        });
    },
    //根据id删除老师
    del(id) {
      this.$axios
        .get("/teacher/deleteTeacherById?id=" + id)
        .then((res) => {
          if (res.data) {
            this.$message.success("删除成功");
            //刷新
            this.selectTeacher();
          } else {
            this.$message.error("删除失败");
          }
        });
    },
    //打开修改页面
    openUpTeacher(row) {
      //修改表单赋值
      this.upForm = row;
      this.upHandle = true;
    },

    //修改
    upTeacher() {
      this.$axios
        .post("/teacher/updateTeacher", this.upForm)
        .then((res) => {
          if (res.data) {
            this.$message.success("修改成功");
            //关闭修改页面
            this.upHandle = false;
            //清空表单
            this.upForm = {};
            //刷新
            this.selectTeacher();
          } else {
            this.$message.error("修改成功");
          }
        });
    },
    //全查
    selectTeacher() {
      this.$axios
        .get("/teacher/selectTeacher", {
          params: {
            tSex: this.tSex,
            tEducation: this.tEducation,
            tName: this.tName,
            pageNum: this.pages.pageNum,
            pageSize: this.pages.pageSize,
          },
        })
        .then((res) => {
          if ((res.code = 200)) {
            //教师信息表格赋值
            this.teacherData = res.data.data.content;
            (this.tSex = ""),
              (this.tEducation = ""),
              (this.tName = ""),
              (this.pages.total = res.data.data.totalSize);
          }
        })
        .catch((err) => {});
    },
    //分页
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.getRole();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.getRole();
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    openadd() {
      this.updateadd = true;
    },
    handleAvatarSuccess() {},
  },
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>